<template>
  <div>
    <!-- 普通文章 -->
    <div class="normalPost" v-if="postData.type == 1">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="$router.back()"></span>
        <div class="iconfont iconnew"></div>
        <div
          class="btn"
          @click="handleFollow"
          :style="{
            background: postData.has_follow ? '' : $colorObj.color,
            color: postData.has_follow ? '' : '#fff',
          }"
        >{{ postData.has_follow ? "已关注" : "关注" }}</div>
      </div>
      <div class="main">
        <div class="title">{{ postData.title }}</div>
        <div class="info">
          {{ postData.user.nickname }} {{ postData.create_date.split("T")[0] }}
          {{ postData.create_date.split("T")[1].split(".")[0] }}
        </div>
        <div class="container" v-html="postData.content"></div>
      </div>
    </div>
    <!-- 视频文章 -->
    <div class="videoPost" v-if="postData.type == 2">
      <video
        :src="postData.content.split('?')[0]"
        :poster="postData.cover[0].url"
        controls
        preload="preload"
        width="100%"
      ></video>
      <div class="info">
        <img src="@/assets/logo.png" alt />
        <div class="name">火星时报</div>
        <div
          class="btn"
          @click="handleFollow"
          :style="{
            background: postData.has_follow ? '' : $colorObj.color,
            color: postData.has_follow ? '' : '#fff',
          }"
        >{{ postData.has_follow ? "已关注" : "关注" }}</div>
      </div>
      <div class="title">{{ postData.title }}</div>
    </div>
    <!-- 按钮 -->
    <div class="btns">
      <div
        class="btn"
        @click="handleLike"
        :style="{ borderColor: postData.has_like ? $colorObj.color : '' }"
      >
        <span
          class="iconfont icondianzan"
          :style="{
            color: postData.has_like ? $colorObj.color : '',
          }"
        ></span>
        {{ postData.like_length }}
      </div>
      <div class="btn">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>

    <div class="commentWrapper">
      <h2>精彩跟帖</h2>
      <div v-if="commentList.length">
        <Comments
          @callReply="callReply"
          :commentData="item"
          v-for="item in commentList"
          :key="item.id"
        />
        <div class="moreComment">
          <div class="btn" @click="$router.push('/morecomment/' + $route.params.id)">更多跟帖</div>
        </div>
      </div>
      <div class="noComment" v-if="commentList.length == 0">暂无评论, 快来抢占沙发吧!</div>
    </div>

    <CommentInput
      @loadComment="loadComment"
      ref="comment"
      :parentInfo="parentInfo"
      :commentLength="commentLength"
      :has_star="postData.has_star"
    />
  </div>
</template>

<script>
import Comments from "@/components/comment/Main";
import CommentInput from "@/components/comment/CommentInput";
export default {
  components: {
    Comments,
    CommentInput,
  },
  data() {
    return {
      postData: {},
      commentList: [],
      parentInfo: {},
      commentLength: 0,
    };
  },
  created() {
    this.$axios({
      url: "/post/" + this.$route.params.id,
    }).then((res) => {
      this.postData = res.data.data;
    });
    this.loadComment();
  },
  methods: {
    loadComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
      }).then((res) => {
        this.commentLength = res.data.data.length;
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
      });
    },
    handleFollow() {
      // 取消关注
      if (this.postData.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          if (res.data.message == "取消关注成功") {
            this.postData.has_follow = false;
          }
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          if (res.data.message === "关注成功") {
            this.postData.has_follow = true;
          }
        });
      }
    },
    handleLike() {
      this.$axios({
        url: "/post_like/" + this.$route.params.id,
      }).then((res) => {
        if (res.data.message == "点赞成功") {
          this.postData.like_length++;
          this.postData.has_like = true;
        } else if (res.data.message == "取消成功") {
          this.postData.like_length--;
          this.postData.has_like = false;
        }
      });
    },
    callReply(parentInfo) {
      this.parentInfo = parentInfo;
      this.$refs.comment.handleTextarea();
    },
  },
};
</script>

<style lang="less" scoped>
.normalPost {
  .header {
    display: flex;
    align-items: center;
    padding: 0 12 / 360 * 100vw;
    .iconjiantou2 {
      font-size: 16 / 360 * 100vw;
    }
    .iconnew {
      flex: 1;
      padding-left: 10 / 360 * 100vw;
      font-size: 46 / 360 * 100vw;
    }
    .btn {
      width: 66 / 360 * 100vw;
      height: 24 / 360 * 100vw;
      line-height: 24 / 360 * 100vw;
      text-align: center;
      font-size: 14 / 360 * 100vw;
      border: 1px solid #ccc;
      border-radius: 12 / 360 * 100vw;
    }
  }
  .main {
    padding: 14 / 360 * 100vw;
    margin-bottom: 20 / 360 * 100vw;
    .title {
      font-size: 16 / 360 * 100vw;
      font-weight: 600;
    }
    .info {
      font-size: 12 / 360 * 100vw;
      color: #888;
      padding: 10 / 360 * 100vw 0;
    }
    .container {
      /deep/ img {
        width: 100%;
      }
    }
  }
}

.videoPost {
  .title {
    padding: 12 / 360 * 100vw;
    margin-bottom: 30 / 360 * 100vw;
  }
  .info {
    padding: 12 / 360 * 100vw;
    display: flex;
    align-items: center;
    img {
      width: 36 / 360 * 100vw;
      height: 36 / 360 * 100vw;
      border-radius: 50%;
      margin-right: 8 / 360 * 100vw;
    }
    .name {
      flex: 1;
      font-size: 14 / 360 * 100vw;
    }
    .btn {
      width: 66 / 360 * 100vw;
      height: 26 / 360 * 100vw;
      line-height: 26 / 360 * 100vw;
      border: 1px solid #ccc;
      border-radius: 14/360 * 100vw;
      text-align: center;
      font-size: 14 / 360 * 100vw;
    }
  }
}

.btns {
  display: flex;
  justify-content: space-around;
  padding-bottom: 28 / 360 * 100vw;
  border-bottom: 4px solid #e4e4e4;
  .btn {
    height: 30 / 360 * 100vw;
    line-height: 30 / 360 * 100vw;
    padding: 0 10 / 360 * 100vw;
    border: 1px solid #ccc;
    border-radius: 16 / 360 * 100vw;
    .iconweixin {
      color: #05c905;
    }
  }
}

.commentWrapper {
  padding-top: 20 / 360 * 100vw;
  h2 {
    text-align: center;
  }
  .noComment {
    text-align: center;
    padding-top: 20 / 360 * 100vw;
    color: #888;
  }
  .moreComment {
    text-align: center;
    padding: 30 / 360 * 100vw;
    margin-bottom: 30 / 360 * 100vw;
    .btn {
      display: inline-block;
      border: 1px solid #333;
      width: 80 / 360 * 100vw;
      height: 26 / 360 * 100vw;
      text-align: center;
      font-size: 14 / 360 * 100vw;
      border-radius: 14 / 360 * 100vw;
      line-height: 26 / 360 * 100vw;
      padding: 0 10 / 360 * 100vw;
    }
  }
}
</style>
